import 'package:flutter/material.dart';
import 'package:movieapp0915/detail/MovieDetail.dart';
// 先使用假数据，然后再请求真实数据来替代
import '../data/CustomData.dart';
// 使用Dio请求真实数据
import 'package:dio/dio.dart';
// 用来做数据解析的
import 'dart:convert';
// 导入MovieDetail页面
import '../detail/MovieDetail.dart';

class MovieList extends StatefulWidget {
  @override
  _MovieListState createState() => _MovieListState();
}

class _MovieListState extends State<MovieList> {
  // 定义使用的列表数据，他是一个数组.之前我们使用假数据，现在使用真实数据
  // List _movielist = new CustomData().list;
  List _movielist = [];

  // 请求真实数据
  _getMovieList() async {
    String _movielisturl =
        'http://m.maoyan.com/ajax/moreComingList?token=&movieIds=1238399%2C1243361%2C1240752%2C1242130%2C1285928%2C1225993%2C1246335%2C1205290%2C1170287%2C1262590';

    try {
      // 使用Dio 库请求数据
      Dio dio = new Dio();
      // 返回一个Response 数据类型的结果，我们要接受一下。注：请求数据是异步，需要用 async await
      Response response = await dio.get(_movielisturl);
      // 对返回的数据response 进行解析，得到一个 Map/json 类型的值
      Map responseData = json.decode(response.toString());
      // 在setState中绑定数据，这样的话数据的更新会自动促进页面的重新渲染
      setState(() {
        _movielist = responseData["coming"];
      });
    } catch (err) {
      print(err);
    }
  }

  @override
  void initState() {
    // 在页面初始化的时候调用 请求数据的方法
    _getMovieList();
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    // 从上到下  根据数据来渲染页面
    return ListView.builder(
      itemCount: _movielist.length,
      // 遍历函数
      itemBuilder: (BuildContext context, int index) {
        // 存储下每一个遍历的item项
        Map _item = _movielist[index];
        // GestureDetector 他可以添加事件，如果我们想要添加事件，那么就把我们内容放在 GestureDetector 的child属性里面，调用GestureDetector的事件函数
        return GestureDetector(
          onTap: () {
            // 点击每一个Item项，就跳转到对应的详情页
            // 使用路由跳转的方法，是material 为我们提供的
            Navigator.of(context).push(MaterialPageRoute(
              builder: (BuildContext context){
                return MovieDetail(name: _item["nm"], id: _item["id"]);
              }
            ));
          },
          child: Padding(
            padding: EdgeInsets.fromLTRB(10, 10, 10, 0),
            child: Container(
              padding: EdgeInsets.only(bottom: 10),
              decoration: BoxDecoration(
                  border: Border(bottom: BorderSide(color: Colors.black26))),
              child: Row(
                children: <Widget>[
                  // 左边图片区域
                  Container(
                    width: 128,
                    height: 180,
                    child: Image(
                      // 全面填充, 图片可能会被裁切
                      // BoxFit.fill 也是完全填充，是图片完全适应宽高，但是会被拉伸
                      fit: BoxFit.cover,
                      image: NetworkImage('${_resetimg(_item["img"])}'),
                    ),
                  ),

                  // 右边文字排版区域
                  // 自动占据多余空间，当前可以占据多余的宽度，但是不能占据高度
                  Expanded(
                    child: Container(
                      height: 160,
                      padding: EdgeInsets.only(left: 10),
                      // 数量固定, 高度也是固定的，适合用Column
                      child: Column(
                        // 从上到下的排列是主轴， 文字上下均匀分布
                        mainAxisAlignment: MainAxisAlignment.spaceAround,
                        // 左右是副轴 文字从做开始
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: <Widget>[
                          // ?? 这是dart中的语法，非空判断
                          // 前面的值为空/null,取后者。前面的值不为空，取前者
                          Text(
                            '${_item["nm"] ?? "无"}',
                            // 溢出点点点
                            overflow: TextOverflow.ellipsis,
                            maxLines: 1,
                            style: TextStyle(fontSize: 18),
                          ),
                          Text(
                            '评分：${_item["sc"] ?? "无"}',
                            overflow: TextOverflow.ellipsis,
                            maxLines: 1,
                          ),
                          Text(
                            '主演：${_item["star"] ?? "无"}',
                            overflow: TextOverflow.ellipsis,
                            maxLines: 2,
                          ),
                          Text(
                            '上映日期：${_item["comingTitle" ?? "无"]}',
                            overflow: TextOverflow.ellipsis,
                            maxLines: 1,
                          ),
                          Text(
                            '排期：${_item["showInfo"] ?? "无"}',
                            overflow: TextOverflow.ellipsis,
                            maxLines: 1,
                          ),
                        ],
                      ),
                    ),
                  )
                ],
              ),
            ),
          ),
        );
      },
    );
  }
}

String _resetimg(img) => img.replaceAll('/w.h/', '/128.180/');

// ListView()
// 内容是固定的数量，文字或者图片或者widget 按照固定的方向顺序去排版
// 可以设置横向排版 也可以设置纵向排版
// scrollDirection: Axis.horizontal, 这个代表横向排列
// scrollDirection: Axis.vertical 这个是默认值，纵向排版，竖着

// ListView.builder()
// 与ListView 基本相同。但是它可以传递回调函数，针对不固定数量的数组数据进行遍历
// itemCount  表示遍历的次数，必填项
// itemBuilder  回调函数, 接受参数 context上下文和index(每次遍历的当前索引), 返回值是一个widget组件，这个组件会一个一个渲染到我们的页面当中
// 横向排版和纵向排版的 传参跟与ListView相同

// 这个两个很重要的相同点是，我排列的item 项的 宽度或者高度没有限制
// 横向排版 宽度不限制
// 纵向排版 高度不限制

// Column 固定数量，纵向排版。宽高都有限制，会溢出
// Row 固定数量，横向排版。宽高都有限制，会溢出
